<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <!--MyHeader-->
    <div th:include="common::MyHeader"></div>
    <!-- End of MyHeader -->

</head>

<body id="page-top">

<!-- Page Wrapper -->
<div id="wrapper">

    <!-- Sidebar -->
    <ul th:replace="common::Sidebar(${session.user.loginName},${session.role.roleName})"></ul>
    <!-- End of Sidebar -->

    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

        <!-- Main Content -->
        <div id="content">

            <!-- Topbar -->
            <div th:include="common::Topbar(${session.user.userName})"></div>
            <!-- End of Topbar -->

            <!-- Begin Page Content -->
            <div class="container-fluid pre-scrollable">

                <!-- Page Heading -->
                <div class="d-sm-flex align-items-center justify-content-between mb-4">
                    <h1 class="h3 mb-0 text-gray-800">活动报选</h1>
                </div>

                <!-- Content Row -->
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th scope="col">主题</th>
                        <th scope="col">创建人</th>
                        <th scope="col">人数</th>
                        <th scope="col">开始时间</th>
                        <th scope="col">结束时间</th>
                        <th scope="col">场地</th>
                        <th scope="col">学分</th>
                        <th scope="col">备注</th>
                        <th scope="col">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="activity:${activitiesList}" th:id="${activity.activityId}">
                        <th th:text="${activity.activityName}"></th>
                        <th th:text="${activity.createByName}"></th>
                        <th th:text="${activity.count}"></th>
                        <th th:text="${activity.startTime}"></th>
                        <th th:text="${activity.endTime}"></th>
                        <th th:text="${activity.classroom}"></th>
                        <th th:text="${activity.credit}"></th>
                        <th>
                            <button type="button" class="btn btn-sm btn-link" data-toggle="popover" title="详情:"
                                    th:attr="data-content=${activity.remarks}">
                                详情
                            </button>
                        </th>
                        <th>
                            <button th:id="'chooseBtn'+${activity.activityId}" class="btn btn-info" th:onclick="'chooseactivity('+${activity.activityId}+')'">报选
                            </button>
                        </th>
                    </tr>
                    </tbody>
                </table>

            </div>
            <!-- /.container-fluid -->

        </div>
        <!-- End of Main Content -->

        <!-- Footer -->
        <div th:include="common::Footer"></div>
        <!-- End of Footer -->

    </div>
    <!-- End of Content Wrapper -->

</div>
<!-- End of Page Wrapper -->

<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>

<!-- Logout Modal-->
<div th:include="common::LogoutModal"></div>


</body>

</html>
<script>
    $(function () {
        $('[data-toggle="popover"]').popover()
        $.get("/activities/checkUserChoose",
        function (response) {
            var choose=response.data;
            for (let i = 0; i < choose.length; i++) {
                // 存在这个元素，其id为：baimyId
                var btn='chooseBtn'+choose[i];
                if ($("#"+btn).length) {
                    document.getElementById(btn).innerHTML="已选";
                    $("#"+btn).attr('disabled',"true");
                }
            }

        }
        )
    })

    function chooseactivity(value) {
        $.get(
            "/activities/chooseActivity",
            {activityId: value},
            function (response) {
                alert(response.msg);
                if (response.code == 0) {
                    var btn = 'chooseBtn' + value;
                    $("#"+btn).removeAttr(onclick);
                    document.getElementById(btn).innerHTML="已选";
                    $("#"+btn).attr('disabled',"true");
                }
            }
        )
    }

    function unchooseactivity(value) {
        $.post(
            "/activities/unChoose",
            {activityId: value},
            function (response) {
                alert(response.msg);
                window.location.href = "/activities/choose"
            }
        )
    }
</script>
